<template>
    <el-card style="margin-bottom:20px;">
        <div slot="header" class="clearfix">
            <span>账号信息</span>
        </div>

        <div class="user-profile" style="height: 100%">
            <div class="box-center">
                <el-avatar :size="100" :src="require('@/assets/image/admin/manage_user.jpg')"></el-avatar>

                <!--                <pan-thumb :image="require('@/assets/image/admin/manage_user.jpg')" :height="'100px'" :width="'100px'"-->
                <!--                           :hoverable="true">-->
                <!--                </pan-thumb>-->
            </div>
            <div class="box-center">
                <div class="user-name text-center">
                    {{user.account}}
                </div>
                <div class="user-role text-center text-muted">
                    <div> 平台管理员</div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import PanThumb from '@/components/PanThumb/index.vue'
    import {getUserInfo} from "@/core/utils/storage";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";

    @Component({
        name: 'UserCard',
        components: {
            PanThumb
        }
    })
    export default class UserCard extends mixins(BaseVue, Kit) {

        get user() {
            return getUserInfo()
        }


    }
</script>

<style lang="scss" scoped>
    .box-center {
        text-align: center;
        margin: 0 auto;
        display: table;
    }

    .text-muted {
        color: #777;
    }

    .user-profile {
        .user-name {
            font-size: 18px;
            font-weight: bold;
        }

        .box-center {
            padding-top: 10px;
        }

        .user-role {
            padding-top: 10px;
            font-weight: 400;
            font-size: 14px;
        }

        .box-social {
            padding-top: 30px;

            .el-table {
                border-top: 1px solid #dfe6ec;
            }
        }

        .user-follow {
            padding-top: 20px;
        }
    }

    .user-bio {
        margin-top: 20px;
        color: #606266;

        span {
            padding-left: 4px;
        }

        .user-bio-section {
            font-size: 14px;
            padding: 15px 0;

            .user-bio-section-header {
                border-bottom: 1px solid #dfe6ec;
                padding-bottom: 10px;
                margin-bottom: 10px;
                font-weight: bold;
            }
        }
    }
</style>
